import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import moment from 'moment';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
    Row,
    Col,
    Modal,
    Select,
    DatePicker,
    message,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

const { Option } = Select;
const { Item } = Form;
const { RangePicker } = DatePicker;

interface EditorElemProps extends FormComponentProps {
    dispatch?: Dispatch;
    editVisible: boolean;
    ids: any;   // string[]
    changeModal: (editVisible: boolean) => void;
    searchInfo: any;
}

@connect(({
    logisCenterChargeList: { },
}: any) => ({

}))

class EditorElemInfo extends Component<EditorElemProps> {
    handleSubmit = () => {
        const { form: { validateFields }, ids } = this.props;
        validateFields((errors: any, values: any) => {
            if (errors) return;
            const { start_end_time, ...others } = values;
            if (+others.status !== 0 && !start_end_time) {
                return message.warning('请选择有效时间');
            }
            if (start_end_time) {
                others.startTime = moment(start_end_time[0]).format('YYYY-MM-DD HH:mm:ss');
                others.endTime = moment(start_end_time[1]).format('YYYY-MM-DD HH:mm:ss');
            } else {
                others.startTime = +others.status === 0 ? moment().subtract(1, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss') : '';
                others.endTime = +others.status === 0 ? moment().subtract(1, 'days').endOf('day').format('YYYY-MM-DD HH:mm:ss') : '';
            }

            const { searchInfo: search } = this.props;
            const params = { ...others, search };

            params.ids = ids.toString();

            const { dispatch }: any = this.props;
            dispatch({
                type: 'logisCenterChargeList/batchEdit',
                payload: params,
            });

            const { changeModal } = this.props;
            changeModal(false);
        });
    }

    render() {
        const {
            editVisible,
            changeModal,
            form: { getFieldDecorator },
        } = this.props;


        return (
            <Modal
                title={'批量编辑白名单'}
                visible={editVisible}
                destroyOnClose
                width={600}
                onOk={this.handleSubmit}
                onCancel={() => changeModal(false)}
            >
                <Form hideRequiredMark className="tableListForm">
                    <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                        <Col md={20} sm={20} style={{ marginTop: 12 }}>
                            <Item label="　有效时间" colon={false} className="marginB0Import">
                                {getFieldDecorator('start_end_time')(
                                    <RangePicker
                                        showTime
                                        placeholder={['开始时间', '截止时间']}
                                        style={{ width: '100%' }}
                                        format="YYYY/MM/DD HH:mm:ss"
                                        ranges={{
                                            今天: [moment().startOf('day'), moment().endOf('day')],
                                            本周: [moment().startOf('week'), moment().endOf('week')],
                                            本月: [moment().startOf('month'), moment().endOf('month')],
                                            上月: [
                                                moment(moment().subtract({ day: new Date().getDate() - 1, month: 1 })),
                                                moment(moment().subtract({ day: new Date().getDate(), month: 0 })),
                                            ],
                                        }}
                                    />,
                                )}
                            </Item>
                        </Col>
                        <Col md={20} sm={20} style={{ marginTop: 12 }}>
                            <Item label="　　　状态" colon={false} className="marginB0Import">
                                {getFieldDecorator('status', {
                                    rules: [{ required: true, message: '请选择状态' }],
                                })(
                                    <Select
                                        showSearch
                                        placeholder="请选择"
                                        filterOption={(input: any, option: any) => (
                                            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        )}
                                    >
                                        <Option value={1} key={'1'}>启用</Option>
                                        <Option value={0} key={'0'}>禁止</Option>
                                    </Select>,
                                )}
                            </Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        );
    }
}

export default Form.create<EditorElemProps>()(EditorElemInfo);
